<template>
  <div class="login-account">
    <el-form ref="formRef" :rules="rules" :model="account">
      <el-form-item prop="username">
        <el-input v-model="account.username" placeholder="账号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="account.password" placeholder="密码" show-password />
      </el-form-item>
      <el-form-item prop="captchaCode">
        <div class="captcha-img">
          <el-input v-model="account.captchaCode" placeholder="图片验证码" />
          <img
            :src="captchaImgSrc"
            alt=""
            class="img-src"
            @click="changeImgSrcClick"
          />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'

import type { ElForm } from 'element-plus'

import { rules } from '../config/account-config'

import {
  getCaptchaImgSrc,
  postAccountLogin,
  getUserInfo
} from '@/api/login/login'
import { getItem, setItem, removeItem } from '@/utils/storage'

export default defineComponent({
  setup() {
    const store = useStore()
    const router = useRouter()

    const formRef = ref<InstanceType<typeof ElForm>>()
    const account = reactive({
      username: getItem('userName') ?? '',
      password: getItem('password') ?? '',
      captchaCode: '',
      ctoken: '',
      rememberMe: ''
    })
    const captchaImgSrc = ref()

    // 获取图片地址
    const changeImgSrcClick = async () => {
      const res = await getCaptchaImgSrc()
      captchaImgSrc.value = `data:image/jpeg;base64,${res.data.img}`
      account.ctoken = res.data.ctoken
    }
    changeImgSrcClick()

    // 登录
    const accountLogin = (isKeepPassword: boolean) => {
      formRef.value!.validate(async (boolean) => {
        if (boolean) {
          // 记住密码
          if (isKeepPassword) {
            setItem('userName', account.username)
            setItem('password', account.password)
          } else {
            removeItem('userName')
            removeItem('password')
          }
          const res = await postAccountLogin(account)
          if (res.code === '0') {
            store.commit('login/changeToken', res.data)
            setItem('token', res.data)
          } else {
            changeImgSrcClick()
            return (account.captchaCode = '')
          }

          // 获取用户信息
          const resp = await getUserInfo()
          if (resp.code === '0') {
            store.commit('login/changeUserInfo', resp.data)
            setItem('user_info', resp.data)
            router.push('/main')
          }
        }
      })
    }
    return {
      formRef,
      account,
      captchaImgSrc,
      rules,
      changeImgSrcClick,
      accountLogin
    }
  }
})
</script>

<style scoped lang="less">
.login-account {
  padding-top: 20px;
  :deep(.el-form-item) {
    .el-input__inner {
      height: 50px;
    }
    .captcha-img {
      display: flex;
      .img-src {
        width: 90px;
        height: 50px;
        margin: 0 10px;
      }
    }
  }
}
</style>
